<template>
  <li :class="{ active_color: isActive }" @click="tolink">
    <slot></slot>
  </li>
</template>

<script>
export default {
  props: {
    link: {
      type: String,
    },
  },
  methods: {
    tolink() {
      this.$router.push(this.link).catch(() => {
        console.log();
      });
    },
  },
  computed: {
    isActive() {
      return this.$route.path == this.link;
    },
  },
};
</script>

<style scoped>
li {
  flex: 1;
  cursor: pointer;
  color: #851561;
}
li::before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
li:hover {
  background-color: #7A7A7A;
  color: white;
}
.active_color {
  background-color: #7A7A7A;
  color: white;
}
</style>